<% width ||= 300 %>
<% height ||= 300 %>
<% crop ||= false unless defined?(crop) %>
<% auto_submit ||= false %>
<% show_delete_button = defined?(can_delete) ? can_delete : true %>
<% css ||= '' %>

<% if field_name && form %>
  <div data-controller="active-storage-upload"
      data-active-storage-upload-thumb-width-value="<%= width %>"
      data-active-storage-upload-thumb-height-value="<%= height %>"
      data-active-storage-upload-crop-value="<%= crop.presence || false %>"
      data-active-storage-upload-auto-submit-value="<%= auto_submit %>"
      data-active-storage-upload-field-name-value="<%= form.object_name %>[<%= field_name %>]"
      data-active-storage-upload-allowed-file-types-value="<%= Rails.application.config.active_storage.web_image_content_types %>"
      class="d-flex flex-column justify-content-center w-100 position-relative">
    <div class="upload-area"
         data-action="click->active-storage-upload#open"
    >
      <% if form.object.send(field_name).attached? && form.object.send(field_name).variable? %>
        <%= spree_image_tag(
          form.object.send(field_name),
          width: width,
          height: height,
          class: 'img-fluid rounded',
          data: { active_storage_upload_target: 'thumb' },
          loading: :lazy
        ) %>
      <% else %>
        <img data-active-storage-upload-target="thumb" class="img-fluid rounded-lg" style="display: none" />
      <% end %>

      <div class="d-flex flex-column justify-content-center align-items-center h-100 p-5 rounded-lg <%= css %>" data-active-storage-upload-target="placeholder" <% if form.object.send(field_name).attached? && form.object.send(field_name).variable? %>style="display: none !important"<% end %>>
        <%= icon('upload', class: 'mr-0 mb-3', style: 'font-size: 2rem;') %>
        <%= Spree.t('admin.upload_new_asset') %>

        <% if crop %>
          <span class="text-muted ml-2 text-center small mt-2">
            <%= Spree.t('admin.recommended_size') %>: <%= width %>x<%= height %>px
          </span>
        <% end %>
      </div>
    </div>

    <div class="d-flex align-items-center my-2" data-active-storage-upload-target="toolbar" <% unless form.object.send(field_name).attached? && form.object.send(field_name).variable? %>style="display: none !important"<% end %>>
      <button type="button" class="btn btn-light" data-action="active-storage-upload#open">
        <%= icon('upload') %>
        <%= Spree.t('actions.select_file') %>
      </button>

      <% if show_delete_button %>
        <button type="button" class="btn btn-danger ml-auto" data-action="active-storage-upload#remove" data-turbo-confirm="<%= Spree.t(:are_you_sure) %>">
          <%= icon('trash') %>

          <%= Spree.t('actions.destroy') %>
        </button>
        <input type="hidden" name="remove_<%= field_name %>" data-active-storage-upload-target="remove" />
      <% end %>
    </div>
  </div>
<% end %>
